<template>
    <div class="wrapper">
		<div class="header">群组</div>
		<div class="content">
			<div class="search">
				<div class="text">
					<input type="text" placeholder="搜索">
				</div>
				<span class="search_btn"><img src="img/search_btn.png" alt=""></span>
			</div>
			<div class="list">
				<div v-for="item in groupListData" class="list_wrapper">
					<div class="list_item">
						<div class="list_item_left">
							<img @click="getGroupDetail(item.GId, item.RoleEn)" :src="item.FaceUrl" alt="">
							<span class="item_title" @click="goGroupMemberList(item.GroupId, item.RoleEn, item.TypeEn)">{{item.Name}}</span>
							<button @click="groupChat(item.GroupId)">聊天页面</button>
						</div>
						<!-- <div class="circle">1</div> -->
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="footer_item">
				<i class="iconfont icon-duanxinqunfa"></i>
				<div class="controlo"><span>8</span></div>
			</div>
			<div class="footer_item">
				<i class="iconfont icon-kehuqunzu"></i>
				<div class="controlo"><span>100</span></div>
			</div>
			<div class="footer_item">
				<i class="active iconfont icon-user"></i>
				<div class="controlo"><span>99</span></div>
			</div>
		</div>
	</div>
</template>

<script>
//import headTop from '../../components/header/head'
//import {cityGuess, hotcity, groupcity} from '../../service/getData'
import $ from 'jquery'
import Client from '../../config/common'
export default {
    data(){
        return{
					groupListData: {}, // 保存群组列表数据
					loginInfo: {}, // 保存登录成功的当前用户信息
        }
		},
		created () {

			// 登录初始化
    	this.initLogin();
			
		},
		watch: {
			loginInfo:{
				handler:function(val,oldval){  
						console.log('fffeeeeee',val)  
				},  
				deep:true//对象内部的属性监听，也叫深度监听  
			}

		},
		methods:{

			// 登录初始化
			initLogin() {
				Client.login(this.getLoginInfo);
			},

			// 获得登录成功信息
			getLoginInfo(loginInfo) {
				// 将 登录信息保存在 vue的data里
				this.loginInfo = loginInfo;
				Client.log("登录成功-start");
				Client.log(loginInfo);
				Client.log("登录成功-end");

				// 获取群组列表
				this.getMyGroup();
      
			},

			//跳转群组详情页面
			getGroupDetail(groupid, RoleEn) {
				// 设置跳转群组详情页面时的
				let currentGroupId = groupid;
				let rank = RoleEn; // 当前登录用户在群组的等级身份
				if(RoleEn == "Owner"){
					this.$router.push({path: '/editGroupDetail', query:{currentGroupId}});
				}else{
					this.$router.push({path: '/groupDetail', query:{currentGroupId}});
				}
			},


			// 进入群组成员列表
			goGroupMemberList(groupid, loginRoleEn, group_type) {
				if(groupid && loginRoleEn) {
					let currentGroupId = groupid;
					let loginPart = loginRoleEn;
					let groupType = group_type;
					this.$router.push({path: '/groupMemberList', query:{currentGroupId, loginPart, groupType}});
				}
			},

			// 进入聊天页面
			groupChat(group_id) {
				let id = group_id;
				let selType = "GROUP";
				this.$router.push({path: '/session', query: {id, selType}});
			},
			
			// 获取列表
			getMyGroup() {
					let That = this;
					// nitGetMyGroupTable([]);
					let options = {
							'Member_Account': this.loginInfo.identifier,
							'Limit': 20,
							'Offset': 0,
							//'GroupType':'',
							'GroupBaseInfoFilter': [
									'Type',
									'Name',
									'Introduction',
									'Notification',
									'FaceUrl',
									'CreateTime',
									'Owner_Account',
									'LastInfoTime',
									'LastMsgTime',
									'NextMsgSeq',
									'MemberNum',
									'MaxMemberNum',
									'ApplyJoinOption',
									'ShutUpAllMember'
							],
							'SelfInfoFilter': [
									'Role',
									'JoinTime',
									'MsgFlag',
									'UnreadMsgNum'
							]
					};
					webim.getJoinedGroupListHigh(
							options,
							function(resp) {
									if (!resp.GroupIdList || resp.GroupIdList.length == 0) {
											alert('你目前还没有加入任何群组');
											return;
									}
									Client.log("获取群组列表-start");
									Client.log(resp);
									Client.log("获取群组列表-end");
									let data = [];
									// var html = '';
									for (let i = 0; i < resp.GroupIdList.length; i++) {

											let group_id = resp.GroupIdList[i].GroupId;
											let name = webim.Tool.formatText2Html(resp.GroupIdList[i].Name);
											let faceUrl = resp.GroupIdList[i].FaceUrl;
											let type_en = resp.GroupIdList[i].Type;
											let type = webim.Tool.groupTypeEn2Ch(resp.GroupIdList[i].Type);
											let role_en = resp.GroupIdList[i].SelfInfo.Role;
											let role = webim.Tool.groupRoleEn2Ch(resp.GroupIdList[i].SelfInfo.Role);
											let msg_flag = webim.Tool.groupMsgFlagEn2Ch(resp.GroupIdList[i].SelfInfo.MsgFlag);
											let msg_flag_en = resp.GroupIdList[i].SelfInfo.MsgFlag;
											let join_time = webim.Tool.formatTimeStamp(resp.GroupIdList[i].SelfInfo.JoinTime);
											let member_num = resp.GroupIdList[i].MemberNum;
											let notification = webim.Tool.formatText2Html(resp.GroupIdList[i].Notification);
											let introduction = webim.Tool.formatText2Html(resp.GroupIdList[i].Introduction);
											let ShutUpAllMember = resp.GroupIdList[i].ShutUpAllMember; //== 'On' ? resp.GroupIdList[i].ShutUpAllMember = '开启' : resp.GroupIdList[i].ShutUpAllMember = '关闭';
											data.push({
													'GId': group_id,
													'GroupId': webim.Tool.formatText2Html(group_id),
													'Name': name,
													'FaceUrl': faceUrl,
													'TypeEn': type_en,
													'Type': type,
													'RoleEn': role_en,
													'Role': role,
													'MsgFlagEn': msg_flag_en,
													'MsgFlag': msg_flag,
													'MemberNum': member_num,
													'Notification': notification,
													'Introduction': introduction,
													'JoinTime': join_time,
													'ShutUpAllMember': ShutUpAllMember
											});
										}
										
										// 获取当前用户的群组列表
										That.groupListData = data;

										Client.log("群组列表，处理后数据-start");
										Client.log(That.groupListData);
										Client.log("群组列表，处理后数据-end");
									
									
									// $(".list").append(html);

									//查询某个群的详情
									// $('.list').find('.look_groupid_details').each(function(i, e){
									// 	$(e).on('click', function(){
									// 		window.location.href = './group_details.html?groupid='+$(this).attr("groupid");
									// 		// getGroupInfo($(this).attr("groupid"));
									// 	});
									// });

									//查询某个群的成员列表
									// $('.list').find('.item_title').each(function(i, e){
									// 	$(e).on('click',function(){
									// 		window.location.href = './group_pason_list.html?groupid='+$(this).attr("groupid");
									// 	});
									// });
									//打开我的群组列表对话框
									// $('#get_my_group_table').bootstrapTable('load', data);
									// $('#get_my_group_dialog').modal('show');
							},
							function(err) {
									alert(err.ErrorInfo);
							}
					);
			
			},

    },
		mounted(){
        	
    },

    components:{
       // headTop
    },

    computed:{

    }
}

</script>

<style lang="scss"> 
   @import '../../style/group';
</style>